<template>
  <div class="tx">
    <div class="left">
      <img
        src="https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
        alt=""
      />
      <h3>欢迎您陈同学</h3>
      <p>XX系同学</p>
      <div class="detail">数据来源</div>
      <!-- <div :style="{ width: '200px', height: '200px' }" id="myChart5"></div> -->
      <ul class="ullist">
        <li><span>所属学院</span><span>23</span></li>
        <li><span>所属专业</span><span>23</span></li>
        <li><span>选课数量</span><span>23</span></li>
        <li><span>综合排名</span><span>23</span></li>
        <li><span>专业排名</span><span>23</span></li>
      </ul>
    </div>
    <div class="right">
      <div style="margin-top: 70px">
        <b>学年</b
        ><select>
          <option selected="selected">全部</option>
          <option>2015年-2016年</option>
          <option>2016年-2017年</option>
          <option>2017年-2018年</option>
        </select>
      </div>
      <div class="echart-container">
        <el-row :gutter="32" class="row-style">
          <el-col :xs="24" :sm="24" :lg="12">
            <div>
              <h3>课程成绩</h3>
              <b>学年</b
              ><select>
                <option selected="selected">全部</option>
                <option>2015年-2016年</option>
                <option>2016年-2017年</option>
                <option>2017年-2018年</option>
              </select>
            </div>
            <div class="chart-wrapper">
              <bar-chart />
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="12">
            <div>
              <h3>公共课程</h3>
              <b>学年</b
              ><select>
                <option selected="selected">全部</option>
                <option>2015年-2016年</option>
                <option>2016年-2017年</option>
                <option>2017年-2018年</option>
              </select>
            </div>
            <div class="chart-wrapper">
              <pie-chart />
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="32" class="row-style">
          <el-col :xs="24" :sm="24" :lg="12">
            <div>
              <h3>专业课程</h3>
              <b>学年</b
              ><select>
                <option selected="selected">全部</option>
                <option>2015年-2016年</option>
                <option>2016年-2017年</option>
                <option>2017年-2018年</option>
              </select>
            </div>
            <div class="chart-wrapper">
              <bar-simple />
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="12">
            <div>
              <h3>专业绩点</h3>
              <b>学年</b
              ><select>
                <option selected="selected">全部</option>
                <option>2015年-2016年</option>
                <option>2016年-2017年</option>
                <option>2017年-2018年</option>
              </select>
            </div>
            <div class="chart-wrapper">
              <raddar-chart />
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="32" class="row-style">
          <el-col :xs="24" :sm="24" :lg="12">
            <div>
              <h3>绩点</h3>
              <b>学年</b
              ><select>
                <option selected="selected">全部</option>
                <option>2015年-2016年</option>
                <option>2016年-2017年</option>
                <option>2017年-2018年</option>
              </select>
            </div>
            <div class="chart-wrapper">
              <dynamic-data />
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="12">
            <div>
              <h3>公共课程</h3>
              <b>学年</b
              ><select>
                <option selected="selected">全部</option>
                <option>2015年-2016年</option>
                <option>2016年-2017年</option>
                <option>2017年-2018年</option>
              </select>
            </div>
            <div class="chart-wrapper">
              <my-sore />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import BarChart from "./components/BarChart";

import PieChart from "./components/PieChart";
import BarSimple from "./components/BarSimple";

import RaddarChart from "./components/RaddarChart";
import DynamicData from "./components/DynamicData";
import MySore from "./components/MySore";

export default {
  name: "ECharts",
  components: {
    BarChart,
    RaddarChart,
    PieChart,
    BarSimple,
    DynamicData,
    MySore,
  },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.echart-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .row-style {
    height: 50%;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.tx {
  background: linear-gradient(top left, #0094d6, #1f67af);
  display: flex;
}
.left {
  min-width: 200px !important;
  border-right: 1px solid #000;
  box-sizing: content-box;
}
.left img {
  position: relative;
  display: block;
  margin: 60px 0 0 20px;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  box-shadow: 3px 3px 3px #666;
  border: 3px solid #111;
}
.left h3,
p {
  text-align: center;
}
.left .detail {
  background-color: #013358;
  height: 30px;
  line-height: 30px;
  padding-left: 2px;
}
.left .ullist {
  text-align: left;
  padding: 3px;
  margin-left: 0;
  list-style: none;
}
.left .ullist li {
  display: flex;
  justify-content: space-between;
  height: 30px;
}
.left .ullist li:nth-child(1) {
  border-bottom: 2px solid #c45955;
}
.left .ullist li:nth-child(2) {
  border-bottom: 3px solid #64bfe9;
}
.left .ullist li:nth-child(3) {
  border-bottom: 3px solid #d7a959;
}
.left .ullist li:nth-child(4) {
  border-bottom: 4px solid #47a26b;
}
.left .ullist li:nth-child(5) {
  border-bottom: 5px solid #61a0a8;
}
.left .ullist li span:nth-child(1) {
  display: inline-block;
  padding-left: 2px;
}
.left .ullist li span:nth-child(2) {
  display: inline-block;
  padding-right: 3px;
}
.right {
  flex: 1;
}
.contentbox {
  display: flex;
  flex-wrap: wrap;
}
.contentbox > div div:nth-child(1) {
  width: 100%;
  height: 60px;
}
.contentbox > div div:nth-child(2) {
  width: 550px;
  height: 340px;
}
#myChart2 {
  transform: scale(0.5);
}
</style>
